<template>
  <div class="ResEfficiency-container">
    <!-- 栅格 输入框 和按钮 -->
    <el-row class="top">
      <el-form label-width="150px" label-position="right">
        <el-radio-group label="当前显示表格：" v-model="radio1" @change="changeTable">
          <el-radio-button v-model="radio1" label="1" border>一手数据处理效率</el-radio-button>
          <el-radio-button v-model="radio1" label="2" border>总体效率处理效率</el-radio-button>
        </el-radio-group>
      </el-form>
    </el-row>
    <el-row class="filterCondition">
      <el-form
        label-width="82px"
        label-position="right"
        ref="formLabelAlign"
        :model="formLabelAlign"
      >
        <el-form-item prop="city" label="城市" v-if="ShowCity">
          <el-select v-model="formLabelAlign.city">
            <!-- <el-option label="所有" value="all"></el-option> -->
            <el-option
              v-for="item in cityselectList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item prop="scopeOf" label="层级">
        <el-select v-model="formLabelAlign.scopeOf" placeholder="请选择层级">-->
        <!-- <el-option label="忽略层级" value = ""  ></el-option>
        <el-option label="城市" value="city" v-if="ShowCity" ></el-option>-->
        <!-- <el-option
                v-for="item in cengJiList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item label="层级">
          <!-- <el-select v-model="formLabelAlign.searchType" placeholder="请选择搜索类型" id="TeamOrGuWen">
            <el-option label="顾问" value="guwen"></el-option>
            <el-option label="团队" value="team"></el-option>
          </el-select>-->
          <el-select v-model="formLabelAlign.scopeOf" id="otherThing" placeholder>
            <!-- <el-option label="所有" value=""></el-option> -->
            <!-- <el-option label="分公司" value="fenGS" v-show="showCengJi.fenGS"></el-option>
            <el-option label="区域" value="quyu" v-show="showCengJi.quyu"></el-option>
            <el-option label="部门" value="bumen" v-show="showCengJi.bumen"></el-option>
            <el-option label="顾问" value="guwen" v-show="showCengJi.guwen"></el-option>-->
            <el-option label="分公司" value="fenGS"></el-option>
            <el-option label="区域" value="quyu"></el-option>
            <el-option label="部门" value="bumen"></el-option>
            <el-option label="顾问" value="guwen"></el-option>
          </el-select>
          <el-input v-model="formLabelAlign.scopeOfValue" class="yaosile" id="addThing"></el-input>
        </el-form-item>

        <el-form-item prop="timeType" label="时间">
          <el-select
            v-model="formLabelAlign.dayType"
            id="time"
            @change="holderQuJian"
            placeholder="时间"
          >
            <!-- <el-option label="不限时间" value = ""  ></el-option> -->
            <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="value1" label="时间区间" v-show="isShow">
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item class="BTN">
          <el-button
            style="background-color:#c73e3a;color:#fff"
            @click="checkCus"
            class="check"
            :disabled="disTBN"
          >查询</el-button>
          <!-- <el-button style="background-color:	#00CDCD;color:#fff" @click="resetForm('formLabelAlign')"   class="check">重置筛选条件</el-button> -->
        </el-form-item>
      </el-form>
    </el-row>

    <!-- table -->
    <!-- <el-table  @selection-change="changeCus" :row-class-name="tableRowClassName" :data="tableData" style="width: 100%" stripe> -->
    <el-table :data="tableData" v-loading="loading" style="width: 100%" fit v-show="radio1==1" stripe >
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column label="归属">
        <template slot-scope="scope">{{ scope.row.parentName2+"-"+ scope.row.parentName4 }}</template>
      </el-table-column>
      <el-table-column prop="todayNumber" label="新数据"></el-table-column>
      <el-table-column label="处理时效">
      <el-table-column :label="'夜间 \n(昨天)22:00-(当天)8:00'">
        <template slot-scope="scope">{{ scope.row.nightPrescription | timeSlash}}</template>
      </el-table-column>
      <el-table-column :label="'日常\n(当天)8:00-(当天)22:00'">
        <template slot-scope="scope">{{ scope.row.dayPrescription | timeSlash}}</template>
      </el-table-column>
      </el-table-column>
      <el-table-column prop="qualityRate" label="优质率"></el-table-column>
      <el-table-column prop="frequency" :label="'0星客户跟进频次 \n (客户备注/客户数)'" label-class-name="black" class-name="b1"></el-table-column>
      <el-table-column label="待抓客户" label-class-name="black">
       <el-table-column prop="level0Grab" label="0星6小时待抓客户" label-class-name="black"></el-table-column>
        <el-table-column prop="level2Grab" label="2(2+)星6天待抓客户" label-class-name="black"></el-table-column>
        <!-- <el-table-column prop="level3Count" label="2+客户" ></el-table-column> -->
        <el-table-column prop="level3Grab" label="3+星4天待抓客户" label-class-name="black"></el-table-column>
      </el-table-column>
      
      <!-- <el-table-column prop="grabRate" label="被抓率" class-name="a5"></el-table-column> -->

      <!-- <el-table-colum lebal="24小时待抓客户">
        <el-table-column prop="oneOutOfContact" label="0星客户" ></el-table-column>
        <el-table-column prop="level2Count" label="2星客户" ></el-table-column>
        <el-table-column prop="level3Count" label="2+客户" ></el-table-column>
        <el-table-column prop="todayRemarks" label="3+客户" ></el-table-column>
      </el-table-colum>-->
    </el-table>

    <el-table :data="tableData2" v-loading="loading2" style="width: 100%" height="600" v-if="radio1==2" stripe>
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column label="归属">
        <template slot-scope="scope">{{ scope.row.parentName2+"-"+ scope.row.parentName4 }}</template>
      </el-table-column>
      <!-- <el-table-column prop="todayNumber" label="新数据" ></el-table-column>
      <el-table-column label="新数据处理时效" >
        <template slot-scope="scope">{{ scope.row.newPrescription}}min</template>
      </el-table-column>
      <el-table-column prop="qualityRate" label="优质率" ></el-table-column>-->
      <el-table-column label="数据量">
        <el-table-column prop="level0Total" label="0星客户"></el-table-column>
        <!-- <el-table-column prop="level2Count" label="2星客户" ></el-table-column> -->
        <el-table-column prop="level2Total" label="2-2+客户"></el-table-column>
        <el-table-column prop="level3Total" label="3+客户"></el-table-column>
        <el-table-column prop="total" label="合计"></el-table-column>
      </el-table-column>
      <el-table-column label="系统客户通次">
        <el-table-column prop="level0General" label="0星客户"></el-table-column>
        <!-- <el-table-column prop="level2Count" label="2星客户" ></el-table-column> -->
        <el-table-column prop="level2General" label="2-2+客户"></el-table-column>
        <el-table-column prop="level3General" label="3+客户"></el-table-column>
        <el-table-column prop="general" label="合计"></el-table-column>
      </el-table-column>
      <el-table-column label="新增备注数量">
        <el-table-column prop="level0Remarks" label="0星客户"></el-table-column>
        <!-- <el-table-column prop="level2Count" label="2星客户" ></el-table-column> -->
        <el-table-column prop="level2Remarks" label="2-2+客户"></el-table-column>
        <el-table-column prop="level3Remarks" label="3+客户"></el-table-column>
        <el-table-column prop="remarks" label="合计"></el-table-column>
      </el-table-column>
      <el-table-column label="数据流出">
        <el-table-column prop="grab" label="被抓数"></el-table-column>
        <el-table-column prop="discard" label="主动丢弃"></el-table-column>
        <el-table-column prop="deployment" label="上级调配"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="pageConfig.currentPage"  :page-sizes="[10, 20 ,50, 100]"  :page-size="10"  layout="total, sizes, prev, pager, next, jumper"  :total="pageConfig.total">
    </el-pagination>-->
  </div>
</template>

<script>
// 导入时间戳
import moment from "moment";
// import {elTableColumn} from "element-ui"
export default {
  // components: {
  //   elTableColumn
  // },
  name: "ResEfficiency",
  // 数据
  data() {
    return {
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: "",
        currentcity: ""
      },
      tableDepartmentShows: {
        dateShow: true,
        cityShow: false,
        fenShow: false,
        quyuShow: false,
        bumenShow: false,
        guWenShow: false
      },
      ShowCity: false,
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: ""
      },
      loading: true,
      loading2: true,
      showTimeKind: true,
      //未分割的完整版时间区间
      value1: "",
      //时间区间隐藏状态
      isShow: false,
      //禁用按钮的状态值
      disTBN: true,
      //页码参数
      pageConfig: {
        currentPage: 1, //当前页
        pageSize: 10, //当前单页数据条数
        total: 0 //请求到的数据总条数
      },
      cityselectList: [{ id: 0, name: "请先选择城市" }],
      cengJiList: [
        { id: "fenGS", name: "分公司" },
        { id: "quyu", name: "大区" },
        { id: "bumen", name: "部门" },
        { id: "guwen", name: "顾问" }
      ],
      //时间选择生成内容
      timeList: [
        { id: "today", name: "今日" },
        { id: "yestoday", name: "昨日" },
        { id: "sevenDay", name: "最近七天" },
        { id: "tomonth", name: "本月" },
        { id: "yesmonth", name: "上月" },
        { id: "customize", name: "自定义" }
      ],
      //客户筛选区域数据
      formLabelAlign: {
        scopeOf: "bumen", //	层级
        city: "上海", //	状态
        timeType: "", //时间类型
        dayType: "today",
        beginTime: moment(new Date()).format("YYYY-MM-DD"), //开始时间
        endTime: moment(new Date()).format("YYYY-MM-DD"), //	结束时间
        value1: "", //	结束时间
        pageSize: "", //分页大小
        currentPage: "", //	当前页码
        scopeOfValue: ""
      },
      // 表格依赖于数据没有数据  会一行都没有
      tableData: [],
      tableData2: [],
      screenWidth: "",
      radio1: "1",
    };
  },
  methods: {
    changeTable(val) {
      if (val == "1") {
        window.console.log("一手数据处理效率");
        // this.$nextTick(()=>this.getTongJiList())
        
      } else {
        window.console.log("总数据处理效率");
        // this.$nextTick(()=>this.getTongJiListS())
      }
    },
    hiddenCengJi() {
      for (let key in this.tableDepartmentShows) {
        this.tableDepartmentShows[key] = false;
      }
    },
    getTongJiListS() {
       this.loading2 = true;
      this.formLabelAlign;
      this.$axios
        .get(
          `/spider/statistical/selByDataEfficiencySS?userId=${sessionStorage.getItem(
            "id"
          )}&city=${this.formLabelAlign.city}&scopeOf=${
            this.formLabelAlign.scopeOf
          }&endTime=${this.formLabelAlign.endTime}&beginTime=${
            this.formLabelAlign.beginTime
          }&searchValue=${this.formLabelAlign.scopeOfValue}`
        )
        .then(res => {
          // window.console.log(res);
          this.disTBN =false
          if (res.data.messageModel.messageText == "成功!") {
            this.tableData2 = res.data.dataModel;
          } else {
            this.$message.error("获取用户失败/(ㄒoㄒ)/~~");
            this.tableData = [];
          }
          this.loading2 = false;
        });
    },
    //获取客户 List的方法
    getTongJiList() {
      // this.$axios
      // .get(`/spider/customer/getDataStatistics?userId=${this.currentUser.currentid}&city=${this.formLabelAlign.city}&scopeOf=${this.formLabelAlign.scopeOf}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}&currentPage=${this.pageConfig.currentPage}&pageSize=${this.pageConfig.pageSize}`)
      // .then(res => {
      //   // console.log(res);
      //   if (res.data.messageModel.messageText == "成功!") {
      //     this.tableData = res.data.dataModel.list;
      //     this.pageConfig.total = res.data.dataModel.total;
      //     this.loading = false;
      //   }else{
      //     this.$message.error("获取用户失败/(ㄒoㄒ)/~~");
      //     this.tableData = [];
      //     this.pageConfig.total = 0;
      //     this.loading = false;
      //   }
      //   })
      // .catch(error => {
      //   console.log(error);
      // });
      this.loading = true;
      this.formLabelAlign;
      this.$axios
        .get(
          `/spider/statistical/selByDataEfficiencyS?userId=${sessionStorage.getItem(
            "id"
          )}&city=${this.formLabelAlign.city}&scopeOf=${
            this.formLabelAlign.scopeOf
          }&endTime=${this.formLabelAlign.endTime}&beginTime=${
            this.formLabelAlign.beginTime
          }&searchValue=${this.formLabelAlign.scopeOfValue}`
        )
        .then(res => {
          // window.console.log(res);
          if (res.data.messageModel.messageText == "成功!") {
            this.tableData = res.data.dataModel;
          } else {
            this.$message.error("获取用户失败/(ㄒoㄒ)/~~");
            this.tableData = [];
          }
          this.loading = false;
        });
    },
    //清空所有筛选条件的方法
    clearAllCheck() {
      for (let i = 0; i < this.formLabelAlign.length; i++) {
        this.formLabelAlign.formLabelAlign[i] = "";
      }
      this.formLabelAlign.value1 = ""; //未分割的完整版时间区间
    },
    //判断时间区间是否隐藏
    holderQuJian(vId) {
      let obj = {};
      obj = this.timeList.find(item => {
        //这里的fenselectList就是上面遍历的数据源
        return item.id === vId; //筛选出匹配数据
      });
      // console.log(obj.name);
      if (obj.name == "自定义") {
        this.isShow = true;
        this.formLabelAlign.dayType = "customize";
      } else if (obj.name == "昨日") {
        this.value1 = "";
        this.isShow = false;
        // this.formLabelAlign.dayType = "yestoday";
        this.formLabelAlign.beginTime = moment(
          new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)
        ).format("YYYY-MM-DD");
        this.formLabelAlign.endTime = moment(
          new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)
        ).format("YYYY-MM-DD");
        // this.formLabelAlign.endTime = moment(new Date()).format("YYYY-MM-DD ");
      } else if (obj.name == "最近七天") {
        this.value1 = "";
        this.isShow = false;
        this.formLabelAlign.beginTime = moment(
          new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7)
        ).format("YYYY-MM-DD");
        this.formLabelAlign.endTime = moment(new Date()).format("YYYY-MM-DD");
      } else if (obj.name == "本月") {
        this.value1 = "";
        this.isShow = false;
        // this.formLabelAlign.dayType = "tomonth";
        this.formLabelAlign.beginTime = moment(new Date()).format("YYYY-MM-01");
        this.formLabelAlign.endTime = moment(new Date()).format("YYYY-MM-DD");
      } else if (obj.name == "上月") {
        this.value1 = "";
        this.formLabelAlign.beginTime = moment()
          .month(moment().month() - 1)
          .startOf("month")
          .format("YYYY-MM-DD");
        this.formLabelAlign.endTime = moment()
          .month(moment().month() - 1)
          .endOf("month")
          .format("YYYY-MM-DD");
        // window.console.log(this.formLabelAlign.beginTime)
        this.isShow = false;
        this.formLabelAlign.dayType = "yesmonth";
      } else if (obj.name == "今日") {
        this.value1 = "";
        this.isShow = false;
        // this.formLabelAlign.dayType = "today";
        this.formLabelAlign.beginTime = moment(new Date()).format("YYYY-MM-DD");
        this.formLabelAlign.endTime = moment(new Date()).format("YYYY-MM-DD");
      }
      // else {
      //   this.isShow = false;
      //   this.formLabelAlign.beginTime = "";
      //   this.formLabelAlign.endTime = "";
      //   this.formLabelAlign.dayType = "all";
      // }
      window.console.log(this.formLabelAlign.beginTime);
      window.console.log(this.formLabelAlign.endTime);
      window.console.log(this.formLabelAlign.dayType);
    },
    //将按钮禁用两秒
    disButton() {
      this.disTBN = true;
      setTimeout(() => {
        this.disTBN = false;
      }, 2000);
    },
    //分页的方法
    // handleSizeChange(val) {
    //   // console.log(val);
    //   if (this.pageConfig.currentPage != 1) {
    //     this.pageConfig.currentPage = 1;
    //     this.pageConfig.pageSize = val;
    //      this.getTongJiList()
    //   }else{
    //     this.pageConfig.pageSize = val;
    //      this.getTongJiList()
    //   }
    // },
    // handleCurrentChange(val) {
    //   this.pageConfig.currentPage = val;
    //     this.getTongJiList()
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //查询
    checkCus() {
      this.disButton();
      if (this.currentUser.currentcity == null) {
        if (this.ShowCity == true && this.formLabelAlign.city == "") {
          this.$message.error("请选择城市");
          return false;
        }
      } else if (this.formLabelAlign.scopeOf == "city") {
        this.hiddenCengJi();
        this.tableDepartmentShows.cityShow = true;
      } else if (this.formLabelAlign.scopeOf == "fenGS") {
        this.hiddenCengJi();
        this.tableDepartmentShows.fenShow = true;
      } else if (this.formLabelAlign.scopeOf == "quyu") {
        this.hiddenCengJi();
        this.tableDepartmentShows.quyuShow = true;
      } else if (this.formLabelAlign.scopeOf == "bumen") {
        this.hiddenCengJi();
        this.tableDepartmentShows.bumenShow = true;
      } else if (this.formLabelAlign.scopeOf == "guwen") {
        this.hiddenCengJi();
        this.tableDepartmentShows.bumenShow = true;
        this.tableDepartmentShows.guWenShow = true;
      } else if (this.formLabelAlign.scopeOf == "") {
        this.hiddenCengJi();
        this.tableDepartmentShows.dateShow = true;
      }

      if (this.value1 != "" || this.formLabelAlign.dayType == "customize") {
        this.formLabelAlign.beginTime = this.value1[0];
        this.formLabelAlign.endTime = this.value1[1];
      } else {
        // this.formLabelAlign.beginTime = "";
        // this.formLabelAlign.endTime = "";
      }
      this.getTongJiList();
      this.getTongJiListS();
    }
  },
  // 本地过滤器
  filters: {
    formatTime(value) {
      if (value == null) {
        return "";
      }
      // return moment(value).format("YYYY-MM-DD HH:mm:ss");
      return moment(value).format("YY-MM-DD");
    },
    timeSlash(val) {
      if(val == 0) return "-"
      else return val+"min"
    }
  },
  created() {
    // console.log(this.$store.state.admin);
    // if (window.sessionStorage.getItem("prohibitLogin") == "true") {
    this.currentUser.currentName = window.sessionStorage.getItem("name");
    this.currentUser.currentid = window.sessionStorage.getItem("id");
    this.currentUser.currentLevel = window.sessionStorage.getItem("userLevel");
    this.currentUser.currentcity = window.sessionStorage.getItem(
      "departmentName1"
    );
    if (
      this.currentUser.currentLevel == 0 &&
      this.currentUser.currentcity == "null"
    ) {
      // this.formLabelAlign.city = "all"
      this.ShowCity = true;
      this.getTongJiList();
      this.getTongJiListS();
      //获取所有城市
      this.$axios
        .get(`/spider/department/getAll`)
        .then(res => {
          this.cityselectList = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    } else {
      this.formLabelAlign.city = this.currentUser.currentcity;
      this.getTongJiList();
      this.getTongJiListS();
    }
  },
  mounted() {
    this.screenWidth = document.body.clientWidth - 214;
    window.onresize = () => {
      this.screenWidth = document.body.clientWidth - 214;
    };
  }
};
</script>

<style  lang='scss'>

.black {
  color: #000000;
}

.ResEfficiency-container {
  .top {
    
    padding-top: 10px;
  }
  .el-form-item.BTN {
    /deep/.el-form-item__content {
      margin-left: 20px !important;
    }
  }
  input.el-input__inner {
    width: 170px;
    height: 32px;
    padding-left: 10px;
  }
  //突出隔行的颜色差异
  .el-table {
    font-size: 12px;
    .cell {
      padding-left: 1px;
      padding-right: 1px;
      text-align: center;
    }
    th {
      padding: 0;
    }
    .warning-row {
      background: #fff;
    }
    .success-row {
      background: #d3d3d3;
    }
    td {
      //取消单元格的上下padding
      padding: 0;
      border-bottom: 1px solid rgb(211, 205, 205);
    }
    .el-button--mini {
      border: 0;
      padding: 5px 15px;
      margin: 5px 0;
      background: rgba(255, 255, 255, 0.01);
    }
    .toEdit:hover {
      color: skyblue;
    }
  }
  .yaosile {
    width: 85px;
  }

  input.el-input__inner#otherThing,
  input.el-input__inner#TeamOrGuWen,
  input.el-input__inner#addThing {
    width: 85px;
    padding-left: 7px;
    height: 32px !important;
  }
  // 时间分类框样式
  input.el-input__inner#kinds,
  /deep/input.el-input__inner#time {
    // width: 85px;
    padding-left: 7px;
    height: 32px !important;
  }
  // 日期选择器
  daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 240px;
    height: 36px;
    vertical-align: middle;
    .el-date-editor .el-range__icon {
      line-height: 27px;
    }
    .el-date-editor .el-range-separator {
      width: 5%;
    }
    /deep/.block,
    #block {
      border: none !important;
      /deep/.el-date-editor--daterange {
        width: 240px !important;
      }
    }
  }
  .el-form-item {
    display: inline-block;
    margin: 3px 0 3px 10px;
  }
  .el-form-item:nth-child(n + 6) {
    margin-top: 0;
  }
  .el-select.time {
    margin-left: 20px;
  }
  .el-input--suffix .el-input__inner.fanwei {
    padding-right: 30px;
    width: 30px;
  }
  .filterCondition {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .check {
    margin-left: 22px;
    padding: 8px 20px;
  }
  .ell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 0.9;
  }
  //分页框样式设置（避免页面被覆盖）
  .el-pagination .el-input__inner {
    width: 100px;
  }
  .el-table .cell{
         white-space:pre-line;
     }

}
</style>